<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>
			<!-- 1.按钮和DIV的单击事件（三种绑定方式）
			2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
			3.登入页面
			用户名输入框，
			密码输入框，
			提交按钮
			
			任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
			         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
			         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
			         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
			         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
			              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
			4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
		</title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
			}
			#div3{
				width: 300px;
				height: 300px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="btn1();">点这里</button>
		<button type="button" id="button2">按钮2</button>
		<button type="button" id="button3">按钮3</button>
		
		<div id="div1" onclick="divclick();" onmouseenter="enterdiv();" onmouseleave="leavediv();" onmousemove="movediv();">	
		</div><br />
		<div id="div2">
			盒子2号
		</div>
		<br />
		<div id="div3">
			盒子三号
		</div><br />
		
		<input type="text" name="" id="Username" value=""  placeholder="请输入您的用户名" onfocus="selectInput();" onblur="leaveInput();" onchange="inputchange();" /><br />
		<input type="password" name="" id="pwd" placeholder="请输入您的密码" onfocus="selectEnter();" onblur="leaveEnter();" /><br />
		<button type="submit" id="sm1" onclick="">提交</button>
		
		
		
		<button type="button" id="btnAdd" onclick="myaddlistener()" >为div1添加监听器</button>
		<button type="button" id="btnRemove" onclick="myremovelistener()" >清除div1监听器</button>
	</body>
	<script type="text/javascript">
		function btn1(){
			console.log('What the hell is that!')
		}
		document.getElementById('button2').onclick=btn1;
		document.getElementById('button3').onclick=function(){
			console.log('boke,你点到了按钮3')
		}
		
		function divclick(){
			console.log('别点啦');
		}	
		document.getElementById('div2').onclick=divclick;
		document.getElementById('div3').onclick=function(){
			console.log('点到了盒子3');
		}
			
		function enterdiv(){
			console.log('get inside');
		}
		
		function leavediv(){
			console.log('your love is gone');
		}	
			
		function movediv(){
			console.log('在动了 在动了');
		}
		
		function selectInput(){
			console.log('用户在输入名称');			
		}
		
		function leaveInput(){
			console.log('输入完成！')
			if(document.getElementById('Username').value==''){
				alert('没有输入用户名')
			}		
		}
		
		function inputchange(){
			console.log('用户名改变');
		}
		
		function selectEnter(){
			console.log('用户在输入密码');
		}
		
		function leaveEnter(){
			console.log('输入完成');
			if(document.getElementById('pwd').value==''){
				alert('没有输入密码');
			}
		}
		function testsubmit(){
			console.log('提交成功');
			if(document.getElementById('Username').value==''&&document.getElementById('pwd')){
				alert('用户名和密码为空')
			}
		}
		function myaddlistener(){
			document.getElementById('div1').addEventListener('mousemove',movediv);			
		}
		
		function myremovelistener(){
				document.getElementById('div1').removeEventListener('mousemove',movediv);
		}

					
	</script>
</html>